<template>
  <div class="dashboard-container">
    <!-- 上半部分功能方块 -->
    <el-row :gutter="20" class="top-boxes">
      <el-col v-for="(item, index) in quickActions" :key="index" :span="4">
        <el-card
          class="box-card"
          shadow="hover"
          @click.native="handleAction(item)"
        >
          <div class="box-content">
            <i :class="item.icon" style="font-size: 30px"></i>
            <h3>{{ item.title }}</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下半部分 -->
    <el-row :gutter="20" class="bottom-section">
      <!-- 左侧饼图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div id="energyChart" style="height: 400px">400</div>
        </el-card>
      </el-col>
      <!-- 右侧统计 -->
      <el-col :span="12">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-card class="stats-card">
              <div class="stats-visual">
                <div class="gauge-container">
                  <div id="electricGauge" style="height: 150px"></div>
                </div>
                <div class="stats-details">
                  <div class="total-text">
                    <i class="el-icon-lightning"></i> <!-- 修正为正确类名 -->
                    总数：{{ meterStats.electric.total }}
                  </div>
                  <h3>电表状态</h3>
                  <div class="detail-item">
                    <span class="dot available"></span>
                    <span>可用：{{ meterStats.electric.available }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="dot offline"></span>
                    <span>失联：{{ meterStats.electric.offline }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="stats-card">
              <div class="stats-visual">
                <div class="gauge-container">
                  <div id="waterGauge" style="height: 150px"></div>
                </div>
                <div class="stats-details">
                  <div class="total-text water">
                    <i class="el-icon-water-cup"></i>
                    总数：{{ meterStats.water.total }}
                  </div>
                  <h3>水表状态</h3>
                  <div class="detail-item">
                    <span class="dot online"></span>
                    <span>在线：{{ meterStats.water.online }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="dot offline"></span>
                    <span>失联：{{ meterStats.water.offline }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      quickActions: [
        { title: '充值缴费', icon: 'el-icon-wallet', action: 'recharge' },
        { title: '一键开户', icon: 'el-icon-user', action: 'createAccount' },
        { title: '账单查询', icon: 'el-icon-document', action: 'queryBill' },
        { title: '设备阈值', icon: 'el-icon-setting', action: 'deviceThreshold' },
        { title: '费用报表', icon: 'el-icon-data-line', action: 'costReport' },
        { title: '保电设置', icon: 'el-icon-lock', action: 'powerProtection' }
      ],
      meterStats: {
        electric: { total: 356, available: 320, offline: 36 },
        water: { total: 278, online: 265, offline: 13 }
      },
      energyData: {
        total:688,
        water: 35,
        electric: 65
      }
    }
  },
  // 新增计算属性
    computed: {
    electricAvailability() {
        return Math.round((this.meterStats.electric.available / this.meterStats.electric.total) * 100)
    },
    waterAvailability() {
        return Math.round((this.meterStats.water.online / this.meterStats.water.total) * 100)
    }
    },
  mounted() {
    this.initChart()
  },
  methods: {
    initGauge(chartId, value, color) {
      const chart = echarts.init(document.getElementById(chartId))
      const option = {
        series: [{
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 100,
          splitNumber: 10,
          axisLine: {
            lineStyle: {
              width: 15,
              color: [[value / 100, color], [1, '#eee']]
            }
          },
          pointer: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: {
            fontSize: 24,
            fontWeight: 'bold',
            color: color,
            offsetCenter: [0, '30%'],
            formatter: '{value}%'
          },
          data: [{ value }]
        }]
      }
      chart.setOption(option)
    },
    initChart() {
      this.initGauge('electricGauge', this.electricAvailability, '#67C23A')
      this.initGauge('waterGauge', this.waterAvailability, '#409EFF')
      const chart = echarts.init(document.getElementById('energyChart'))
      // 修改功能方块样式


      // 修改饼图配置（在initChart方法中）
      const option = {
        title: {
          text: '总费用分布',
          subtext: `￥${this.energyData.total}`,
          left: 'center',
          textStyle: {
            fontSize: 18,
            color: '#303133'
          }
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            {
              value: this.energyData.water,
              name: '水费占比',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#36a3eb' },
                  { offset: 1, color: '#2f78c8' }
                ])
              }
            },
            {
              value: this.energyData.electric,
              name: '电费占比',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#f56c6c' },
                  { offset: 1, color: '#e65454' }
                ])
              }
            }
          ],
          label: { show: true, formatter: '{b}: {d}%' },

        }]
        ,labelLine: { length: 30 },
        label: {
        formatter: '{b|{b}}\n{value}元 ({d}%)',
        rich: {
            b: { fontWeight: 'bold', fontSize: 14 }
        }
        }
      }
      chart.setOption(option)
    },
    handleAction(item) {
      // 这里添加点击事件处理逻辑
      console.log('执行操作:', item.action)
    }
  }
}
</script>

<style scoped>
.stats-visual {
  display: flex;
  align-items: center;
  padding: 15px;
}

.gauge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#67C23A 0% 70%, #F56C6C 70% 100%);
}

.gauge-progress {
  position: absolute;
  width: 50%;
  height: 100%;
  clip: rect(0, 60px, 120px, 0);
  background: #f0f2f5;
  transform-origin: right center;
}

.gauge-text {
  position: absolute;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stats-details {
  flex: 1;
  margin-left: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 14px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.available { background: #67C23A; }
.online { background: #409EFF; }
.offline { background: #F56C6C; }
/* 优化顶部功能方块 */
.top-boxes {
  margin-bottom: 15px;
}
.box-card {
  cursor: pointer;
  transition: all 0.3s;
  margin: 5px;
}
.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.box-content {
  text-align: center;
  padding: 15px 0;
}

.box-content i {
  font-size: 36px;
  margin-bottom: 10px;
  color: #409EFF;
}

/* 调整图表容器 */
.chart-card {
  height: 425px; /* 原500px */
  margin-bottom: 15px;
}

.stats-card {
  height: 230px; /* 原280px */
  margin-bottom: 15px;
  /* 新增布局优化 */
  display: flex;
  flex-direction: column;
}

.stats-visual {
  flex: 1;
  padding: 15px 20px; /* 原20px */
}

.gauge-container {
  width: 130px; /* 原150px */
}

.stats-details {
  margin-left: 15px; /* 原20px */
}

.detail-item {
  margin: 10px 0; /* 原12px */
  font-size: 13px; /* 原14px */
}

.total-text {
  margin-top: 12px; /* 原15px */
}

/* 调整整体布局 */
.dashboard-container {
  padding: 15px;
  background: #f5f7fa;
}

.bottom-section {
  margin-top: 20px;
}

/* 添加响应式布局 */
@media (max-width: 1200px) {
  .top-boxes .el-col {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
}

/* 删除以下错误注释代码块 */
/* 原错误内容：
// 在模板中调整栅格比例
<el-col :span="12">
  <el-row :gutter="15">
    <el-col :span="12">
    </el-col>
    <el-col :span="12">
    </el-col>
  </el-row>
</el-col>
*/

/* 优化统计卡片样式 */
.stats-content {
  padding: 15px;
  font-size: 14px;
}

.stats-content h3 {
  margin-bottom: 15px;
  color: #303133;
  text-align: center;
  font-size: 16px;
}

/* 添加分割线 */
.stats-content div:not(:last-child) {
  border-bottom: 1px solid #ebeef5;
}

/* 调整整体布局 */
.dashboard-container {
  padding: 15px;
  background: #f5f7fa;
}

.bottom-section {
  margin-top: 20px;
}

/* 添加响应式布局 */
@media (max-width: 1200px) {
  .top-boxes .el-col {
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
}
/* 功能方块颜色 */
.box-card:nth-child(1) i { color: #67C23A; } /* 充值缴费-绿色 */
.box-card:nth-child(2) i { color: #409EFF; } /* 一键开户-蓝色 */
.box-card:nth-child(3) i { color: #E6A23C; } /* 账单查询-橙色 */
.box-card:nth-child(4) i { color: #F56C6C; } /* 设备阈值-红色 */
.box-card:nth-child(5) i { color: #909399; } /* 费用报表-灰色 */
.box-card:nth-child(6) i { color: #53a8ff; } /* 保电设置-浅蓝 */

/* 饼图颜色优化 */
#energyChart {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 统计卡片标题样式 */
.stats-card >>> .el-card__header {
  background: #f8f9fa;
  border-bottom: 2px solid #409EFF;
}

/* 状态数值颜色 */
.stats-content div:nth-child(2) { color: #67C23A; } /* 可用/在线数-绿色 */
.stats-content div:nth-child(3) { color: #F56C6C; } /* 失联数-红色 */

/* 添加卡片渐变背景 */
.stats-card {
  background: linear-gradient(to right bottom, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #ebeef5;
}

/* 调整功能方块阴影 */
.box-card:hover {
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.2);
}

/* 新增仪表盘样式 */
.gauge-container {
  position: relative;
  width: 150px;
  margin: 0 auto;
}

.total-text {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  font-size: 12px;
  color: #909399;
}

.stats-card {
  height: 280px; /* 调整卡片高度 */
  margin-bottom: 15px;
  background: linear-gradient(to bottom right, #ffffff 0%, #f8f9fa 100%);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.stats-visual {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stats-details {
  flex: 1;
  margin-left: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin: 12px 0;
  font-size: 14px;
  color: #606266;
}
.total-text {
  display: flex;
  align-items: center;
  margin: 0 0 12px 0;
  font-size: 14px;
  i {
    font-size: 20px;
    margin-right: 8px;
  }
  &.water i {
    color: #409EFF;
  }
  &:not(.water) i {
    color: #67C23A;
  }
}
</style>
